<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <a class="ml-1 text-primary-500">Other Components</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <span class="ml-1 text-secondary">Common</span>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Shortcuts
                </h2>
            </div>
        </div>
        <button
            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
            mat-icon-button
            (click)="toggleDrawer()">
            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
        </button>
    </div>

    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">

        <p>
            This component can be used to show shortcuts to applications, pages or external sources. It can be controlled by the user and any changes will be persisted to the
            backend if setup correctly.
        </p>

        <h2>Usage</h2>
        <textarea
            fuse-highlight
            lang="html">
            <shortcuts></shortcuts>
        </textarea>

        <h2>Message</h2>
        <!-- @formatter:off -->
        <textarea fuse-highlight
                  lang="typescript">
            export interface Shortcut
            {
                id: string;
                label: string;
                description?: string;
                icon: string;
                link: string;
                useRouter: boolean;
            }
        </textarea>
        <!-- @formatter:on -->
        <div class="bg-card py-3 px-6 mt-2 rounded shadow">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>id</div>
                        </td>
                        <td>
                            Unique id of the shortcut.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>label</div>
                        </td>
                        <td>
                            Label of the shortcut.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>description</div>
                        </td>
                        <td>
                            Description of the shortcut.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>icon</div>
                        </td>
                        <td>
                            Icon name for the shortcut.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>link</div>
                        </td>
                        <td>
                            Link of the shortcut.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>useRouter</div>
                        </td>
                        <td>
                            Whether to use the Router to parse the link.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h2>Shortcuts Service</h2>
        <p>
            The <code>ShortcutsService</code> can be used to control the shortcuts outside of the <strong>Shortcuts</strong> component. This is particularly useful to control
            the shortcuts from other components for actions like creating, updating or deleting them.
        </p>

        <h3>Methods</h3>
        <p>
            Here's the list of all available methods from <code>ShortcutsService</code>:
        </p>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                shortcuts$: Observable&lt;Shortcut[]&gt;
            </div>
            <div class="p-6">
                Getter for shortcuts.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                getAll(): Observable&lt;Shortcut[]&gt;
            </div>
            <div class="p-6">
                Get all shortcuts from the server.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                create(shortcut: Shortcut): Observable&lt;Shortcut&gt;
            </div>
            <div class="p-6">
                Create a new shortcut on the server.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                update(id: string, shortcut: Shortcut): Observable&lt;Shortcut&gt;
            </div>
            <div class="p-6">
                Update the shortcut on the server.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                delete(id: string): Observable&lt;boolean&gt;
            </div>
            <div class="p-6">
                Delete the shortcut on the server.
            </div>
        </div>

    </div>

</div>
